<template>

  <div>
    <editor
        :init="init"
        :value="content"
        @input="$emit('update:content', $event.target.value)"
        :tinymce-script-src="tinymceScriptSrc"
    ></editor>
  </div>

</template>

<script>
// import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import { ElMessage } from 'element-plus';
export default {
  props: ['content'],
  emits: ['update:content'],
  components: {
    Editor
  },
  data() {
    // 文本的内容
    // const content = '';
    // 本地 tinymce.js 的地址
    const tinymceScriptSrc = '/static/tinymce/tinymce.js'
    // 初始化配置
    const init = {
      // 语言路径
      language_url: '/static/tinymce/langs/zh_CN.js',
      // 设置简体中文
      language: 'zh_CN',
      // 编辑器的宽
      width: 1000,
      // 编辑器的高
      height: 600,
      // 不允许改变高度
      resize: false,
      // 状态栏(最下面的状态栏) false 为关闭
      statusbar: false,
      // 隐藏右下角技术支持
      branding: false,
      // 自动获取焦点
      auto_focus: true,
      // 屏蔽右键菜单
      contextmenu_never_use_native: true,
      // 图标路径
      icons_url: 'static/tinymce/icons/default/icons.js',
      // 定义图标主题
      icons: 'custom',
      // 占位文本
      placeholder: '你的思念在此书写',
      // 文本格式
      doctype: '<!DOCTYPE html>',
      // 修复列表元素
      fix_list_elements : true,
      // 删除最尾的br
      remove_trailing_brs: false,
      // schema（模式）
      schema: 'html5',
      // 撤销的次数
      custom_undo_redo_levels: 10,
      base_url: '/static/tinymce',
      plugin_base_urls: '/static/tinymce/plugin',
      // 自动保存内容
      autosave_interval: "20s",
      // 草稿有效时间 20分钟
      autosave_retention: "20m",
      plugins: "save autolink autosave emoticons link preview fullscreen image",
      toolbar: "save restoredraft emoticons link preview fullscreen image",
      save_onsavecallback: function () { ElMessage.success('已保存'); },
      // 图片插入请求
      // 后端返回给TinyMCE的JSON数据，形如这样：{ location : "/demo/image/1.jpg" }
      images_upload_url: '/demo/upimg.php',
    }
    return {/*content,*/ tinymceScriptSrc, init}
  },
  methods: {
  }

}
</script>

<style scoped>

</style>